<template>
    <div>
        <el-card>
            <CategorySelect @changeCategory="changeCategory" :isShowList="isShowList"/>
        </el-card>
        <el-card style="margin-top:20px;">
            <!-- spu列表页 -->
            <div v-show="!isShowSpuForm && !isShowSkuForm">
                <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id"
                @click="showAddSpuForm"
                >添加spu</el-button>
                <el-table
                    :data="spuList"
                    border
                    style="width: 100%">
                    <el-table-column
                        align="center"
                        type="index"
                        label="序号"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="spuName"
                        label="spu名称"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="description"
                        label="spu描述"
                        width="width">
                    </el-table-column>
                    <el-table-column
                        prop="prop"
                        label="操作"
                        width="width">
                        <template slot-scope="{row,$index}">
                            <HintButton type="success" icon="el-icon-plus" title="添加spu" @click="showAddSkuForm(row)"></HintButton>
                            <HintButton type="warning" icon="el-icon-edit" title="修改spu" @click="showUpdateSpuForm(row)"></HintButton>
                            <HintButton type="info" icon="el-icon-info" title="查看spu的sku列表" @click="showSkuList(row)"></HintButton>
                            <el-popconfirm :title="`确定要删除${row.spuName}吗?`" @onConfirm="deleteSpu(row)">
                                <HintButton slot="reference" type="danger" icon="el-icon-delete" title="删除spu"></HintButton>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="getSpuList"
                    style="text-align:center"
                    :current-page="page"
                    :page-sizes="[2, 3, 5]"
                    :page-size="limit"
                    :page-count="7"
                    layout="prev, pager, next, jumper,->,sizes,total"
                    :total="total">
                </el-pagination>
            </div>
            <!-- <spuForm v-show="isShowSpuForm" :isShowSpuForm="isShowSpuForm" @update:isShowSpuForm="isShowSpuForm=$event"/> -->
            <spuForm v-show="isShowSpuForm" :isShowSpuForm.sync="isShowSpuForm" ref="spu" @backSuccess="backSuccess"/>
            <skuForm v-show="isShowSkuForm" :isShowSkuForm.sync="isShowSkuForm" ref="sku"/>
            <!-- 添加或修改页面
            <div>
                tianjihouxiyu
            </div> -->
            <!-- 添加sku页面 -->
            <!-- <div>
                tianjihouxiyu
            </div> -->
        </el-card>
        <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogTableVisible" :before-close="dialogClose">
            <el-table :data="skuList" v-loading="loading">
                <el-table-column property="skuName" label="名称" width="200"></el-table-column>
                <el-table-column property="price" label="价格" width="200"></el-table-column>
                <el-table-column property="weight" label="重量" width="200"></el-table-column>
                <el-table-column property="name" label="默认图片" width="200">
                    <template slot-scope="{row,$index}">
                        <img :src="row.skuDefaultImg" alt="" style="width:100px;height:80px">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import skuForm from './skuForm'
import spuForm from './spuForm'
export default {
    name: 'Spu',
    components:{
        skuForm,
        spuForm
    },
    watch:{
        isShowSpuForm(newValue,oldValue){
            this.isShowList = !newValue
        },
        isShowSkuForm(newValue,oldValue){
            this.isShowList = !newValue
        }
    },
    data() {
        return {
            isShowList:true,
            category1Id:'',
            category2Id:'',
            category3Id:'',
            spuList:[],
            page:1,
            limit:2,
            total:0,
            //控制显示页面
            isShowSpuForm:false,
            isShowSkuForm:false,
            dialogTableVisible:false,
            //点击的spu
            spu:{},
            skuList:[],
            loading:false
        }
    },
    methods:{
        changeCategory({categoryId,level}){
            if(level === 1){
                this.category2Id='',
                this.category3Id='',
                this.spuList=[]
                this.category1Id = categoryId
            }else if(level === 2){
                this.category3Id='',
                this.spuList=[]
                this.category2Id = categoryId
            }else {
                this.category3Id = categoryId
                this.getSpuList()
            }
        },
        //选择3级分类请求spu列表数据
        async getSpuList(pager = 1){
            this.page = pager
            let {page,limit, category3Id} = this
            const result = await this.$API.spu.getList(page,limit, category3Id)
            if(result.code === 200 || result.code === 20000){
                this.spuList = result.data.records
                this.total = result.data.total
            }
        },
        //修改每页数量的回调
        handleSizeChange(size){
            this.limit=size
            this.getSpuList()
        },
        //点击列表页添加spu
        showAddSpuForm(){
            this.isShowSpuForm = true
            this.$refs.spu.getAddSpuFormInitData(this.category3Id)
        },
        //点击列表页修改spu
        showUpdateSpuForm(row){
            this.isShowSpuForm = true
            this.$refs.spu.getUpdateSpuFormInitData(row,this.category3Id)
        },
        //点击添加切换到skuForm
        showAddSkuForm(row){
            this.isShowSkuForm = true
            this.$refs.sku.getAddSkuFormInitData(row,this.category1Id,this.category2Id)
        },
        //保存spu后的自定义事件
        backSuccess(spuId){
            if(spuId){
                this.getSpuList(this.page)
            }else{
                this.getSpuList()
            }
        },
        //删除spu
        async deleteSpu(row){
            try {
                const result = await this.$API.spu.remove(row.id)
                if(result.code === 200 || result.code === 20000){
                    this.$message.success('删除spu成功')
                    this.getSpuList(this.spuList.length>1?this.page:this.page-1)
                }else{
                    this.$message.error('删除spu失败')
                }
            } catch (error) {
                this.$message.error('删除spu请求失败')
            }
        },
        //点击查看spu的sku列表
        async showSkuList(row){
            // this.skuList=[]
            this.dialogTableVisible = true
            this.spu = row
            //发请求获取当前点击的sku的列表数据
            this.loading = true
            try {
                const result = await this.$API.sku.getListBySpuId(row.id)
                if(result.code === 200){
                    this.skuList = result.data
                }else{
                    this.$message.error('获取sku列表失败')
                }
            } catch (error) {
                this.$message.error('请求获取sku列表失败')
            }
            this.loading = false
        },
        //dialog关闭之前清空之前的数据
        dialogClose(done){
            this.skuList = []
            this.loading =false
            this.dialogTableVisible = false
            done()
        }
    }
}
</script>

<style lang="scss" scoped>

</style>